<template>
  <!-- 使用 router-link 进行导航 -->
  <router-link :to="link" class="education-box" :style="backgroundStyle">
    <h3>{{ title }}</h3>
  </router-link>
</template>

<script>
export default {
  name: 'EducationBox',
  props: {
    title: {
      type: String,
      required: true // 标题为必填属性
    },
    backgroundImage: {
      type: String,
      default: '' // 默认为空字符串，如果没有提供背景图片
    },
    link: {
      type: String,
      default: '#' // 默认为 #，指向当前页面
    }
  },
  computed: {
    backgroundStyle() {
      return {
        backgroundImage: this.backgroundImage ? `url(${this.backgroundImage})` : '', // 设置背景图片
        backgroundSize: 'cover', // 背景覆盖整个元素
        backgroundPosition: 'center', // 背景居中显示
        backgroundRepeat: 'no-repeat' // 背景图片不重复
      };
    }
  }
};
</script>

<style scoped>
.education-box {
  border: 1px solid #346af3; /* 边框颜色 */
  padding: 10px; /* 内边距 */
  margin: 5px; /* 外边距 */
  border-radius: 4px; /* 边框圆角 */
  background-color: white; /* 默认背景颜色 */
  text-align: center; /* 文字居中 */
  position: relative; /* 用于背景图片的定位 */
  overflow: hidden; /* 防止内容溢出 */
  min-width: 150px; /* 设置最小宽度 */
  min-height: 150px; /* 设置最小高度以确保有足够的空间显示背景图片 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  transition: background-color 0.3s; /* 背景颜色变化过渡效果 */
}

.education-box:hover {
  background-color: #f2f2f2; /* 鼠标悬停时的背景颜色 */
  cursor: pointer; /* 鼠标悬停时显示为可点击的指针 */
}
</style>
